<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.box1{
				transform: translateX(10px);
			}
			.box2{
				transform: translateY(20px);
			}
			.box3{
				transform: translate(20px,10px);
			}
			.box4{
				transform: translate(20px,20px);
			}
			.box5{
				transform: translate(50px,50px);
			}
			.box6{
				transform: translate(100px,100px);
			}
			.box7{
				transform: translate(-25px,-25px);
			}
			
		</style>
	</head>
	<body>
		<div id="box">
			MYDIV
		</div>
		<p><input type="radio" name="tran" id="translate" onclick="fn()"/><span>translate(10px)</span></p>
		<p><input type="radio" name="tran" onclick="fn1()"/><span>translate(20px)</span></p>
		<p><input type="radio" name="tran" onclick="fn2()"/><span>translate(20px,10px)</span></p>
		<p><input type="radio" name="tran" onclick="fn3()"/><span>translate(20px,20px)</span></p>
		<p><input type="radio" name="tran" onclick="fn4()"/><span>translate(50px,50px)</span></p>
		<p><input type="radio" name="tran" onclick="fn5()"/><span>translate(100px,100px)</span></p>
		<p><input type="radio" name="tran" onclick="fn6()"/><span>translate(-25px,-25px)</span></p>
		<script type="text/javascript">
       function fn(){
          var img=document.getElementById("box");
          img.className="box1";
       }

	function fn1(){
          var img=document.getElementById("box");
          img.className="box2";
       }
	function fn2(){
          var img=document.getElementById("box");
          img.className="box3";
       }
	function fn3(){
          var img=document.getElementById("box");
          img.className="box4";
       }
	function fn4(){
          var img=document.getElementById("box");
          img.className="box5";
       }
	function fn5(){
          var img=document.getElementById("box");
          img.className="box6";
       }
	function fn6(){
          var img=document.getElementById("box");
          img.className="box7";
       }
       function fn7(){
          var img=document.getElementById("box");
          img.className="box1";
       }

</script>
	</body>
</html>
